<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手书交易平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo h1 {
            font-size: 28px;
            font-weight: 700;
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 20px;
            transition: background-color 0.3s;
        }
        
        .nav-links a:hover {
            background-color: rgba(255,255,255,0.2);
        }
        
        .user-actions {
            display: flex;
            gap: 15px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-primary {
            background-color: #fff;
            color: #667eea;
        }
        
        .btn-primary:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        
        .btn-secondary {
            background-color: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .btn-secondary:hover {
            background-color: white;
            color: #667eea;
        }
        
        /* 搜索区域 */
        .search-section {
            background-color: white;
            padding: 30px 0;
            margin-top: -30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            position: relative;
            z-index: 10;
        }
        
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .search-input {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .search-input:focus {
            border-color: #667eea;
        }
        
        .category-select {
            padding: 15px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            background-color: white;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .category-select:focus {
            border-color: #667eea;
        }
        
        /* 主要内容 */
        .main-content {
            padding: 40px 0;
        }
        
        .section-title {
            margin-bottom: 30px;
        }
        
        .section-title h2 {
            font-size: 32px;
            font-weight: 700;
            color: #2c3e50;
            position: relative;
            padding-bottom: 15px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        /* 书籍网格 */
        .books-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .book-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }
        
        .book-image {
            height: 250px;
            overflow: hidden;
            background-color: #f0f0f0;
        }
        
        .book-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .book-card:hover .book-image img {
            transform: scale(1.05);
        }
        
        .book-info {
            padding: 20px;
        }
        
        .book-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .book-author {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .book-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .book-price {
            font-size: 24px;
            font-weight: 700;
            color: #e74c3c;
        }
        
        .book-condition {
            padding: 5px 12px;
            background-color: #e8f4fc;
            color: #3498db;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .book-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn-view, .btn-contact {
            flex: 1;
            padding: 10px;
            font-size: 14px;
        }
        
        /* 发布区域 */
        .publish-section {
            background-color: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            margin-top: 40px;
        }
        
        .publish-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-group.full-width {
            grid-column: span 2;
        }
        
        .form-group label {
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .form-control {
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: #667eea;
        }
        
        .btn-submit {
            grid-column: span 2;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            font-size: 18px;
            margin-top: 20px;
        }
        
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        /* 页脚 */
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 40px 0;
            margin-top: 60px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: #667eea;
            border-radius: 2px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #bdc3c7;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            padding-top: 40px;
            margin-top: 40px;
            border-top: 1px solid #34495e;
            color: #95a5a6;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 20px;
            }
            
            .search-form {
                flex-direction: column;
            }
            
            .search-input, .category-select {
                width: 100%;
            }
            
            .publish-form {
                grid-template-columns: 1fr;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }
            
            .btn-submit {
                grid-column: span 1;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>校园二手书交易平台</h1>
                </div>
                <nav class="nav-links">
                    <a href="#">首页</a>
                    <a href="#">浏览书籍</a>
                    <a href="#">我的发布</a>
                    <a href="#">帮助中心</a>
                </nav>
                <div class="user-actions">
                    <button class="btn btn-secondary">登录</button>
                    <button class="btn btn-primary">注册</button>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 搜索区域 -->
    <div class="container">
        <div class="search-section">
            <form class="search-form">
                <input type="text" class="search-input" placeholder="搜索书名、作者或关键词...">
                <select class="category-select">
                    <option value="all">全部分类</option>
                    <option value="textbook">教材</option>
                    <option value="novel">小说</option>
                    <option value="reference">工具书</option>
                    <option value="magazine">杂志</option>
                    <option value="other">其他</option>
                </select>
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>
    
    <!-- 主要内容 -->
    <main class="container main-content">
        <!-- 推荐书籍 -->
        <section class="recommended-books">
            <div class="section-title">
                <h2>推荐书籍</h2>
            </div>
            <div class="books-grid">
                <!-- 书籍卡片 1 -->
                <div class="book-card">
                    <div class="book-image">
                        <img src="https://via.placeholder.com/400x600?text=Python编程" alt="Python编程">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">Python编程：从入门到实践</h3>
                        <p class="book-author">埃里克·马瑟斯</p>
                        <div class="book-meta">
                            <span class="book-price">¥35</span>
                            <span class="book-condition">九成新</span>
                        </div>
                        <div class="book-actions">
                            <button class="btn btn-primary btn-view">查看详情</button>
                            <button class="btn btn-secondary btn-contact">联系卖家</button>
                        </div>
                    </div>
                </div>
                
                <!-- 书籍卡片 2 -->
                <div class="book-card">
                    <div class="book-image">
                        <img src="https://via.placeholder.com/400x600?text=算法导论" alt="算法导论">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">算法导论</h3>
                        <p class="book-author">Thomas H. Cormen</p>
                        <div class="book-meta">
                            <span class="book-price">¥50</span>
                            <span class="book-condition">八成新</span>
                        </div>
                        <div class="book-actions">
                            <button class="btn btn-primary btn-view">查看详情</button>
                            <button class="btn btn-secondary btn-contact">联系卖家</button>
                        </div>
                    </div>
                </div>
                
                <!-- 书籍卡片 3 -->
                <div class="book-card">
                    <div class="book-image">
                        <img src="https://via.placeholder.com/400x600?text=高等数学" alt="高等数学">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">高等数学（上下册）</h3>
                        <p class="book-author">同济大学数学系</p>
                        <div class="book-meta">
                            <span class="book-price">¥45</span>
                            <span class="book-condition">九成新</span>
                        </div>
                        <div class="book-actions">
                            <button class="btn btn-primary btn-view">查看详情</button>
                            <button class="btn btn-secondary btn-contact">联系卖家</button>
                        </div>
                    </div>
                </div>
                
                <!-- 书籍卡片 4 -->
                <div class="book-card">
                    <div class="book-image">
                        <img src="https://via.placeholder.com/400x600?text=数据结构" alt="数据结构">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">数据结构与算法分析</h3>
                        <p class="book-author">Mark Allen Weiss</p>
                        <div class="book-meta">
                            <span class="book-price">¥40</span>
                            <span class="book-condition">八成新</span>
                        </div>
                        <div class="book-actions">
                            <button class="btn btn-primary btn-view">查看详情</button>
                            <button class="btn btn-secondary btn-contact">联系卖家</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 发布二手书 -->
        <section class="publish-section">
            <div class="section-title">
                <h2>发布二手书</h2>
            </div>
            <form class="publish-form">
                <div class="form-group">
                    <label for="book-title">书名</label>
                    <input type="text" id="book-title" class="form-control" placeholder="请输入书名">
                </div>
                <div class="form-group">
                    <label for="book-author">作者</label>
                    <input type="text" id="book-author" class="form-control" placeholder="请输入作者">
                </div>
                <div class="form-group">
                    <label for="book-category">分类</label>
                    <select id="book-category" class="form-control">
                        <option value="">请选择分类</option>
                        <option value="textbook">教材</option>
                        <option value="novel">小说</option>
                        <option value="reference">工具书</option>
                        <option value="magazine">杂志</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="book-condition">成色</label>
                    <select id="book-condition" class="form-control">
                        <option value="">请选择成色</option>
                        <option value="new">全新</option>
                        <option value="like-new">九成新</option>
                        <option value="good">八成新</option>
                        <option value="fair">七成新</option>
                        <option value="poor">六成新及以下</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="book-price">价格</label>
                    <input type="number" id="book-price" class="form-control" placeholder="请输入价格（元）">
                </div>
                <div class="form-group">
                    <label for="book-images">上传图片</label>
                    <input type="file" id="book-images" class="form-control" multiple>
                </div>
                <div class="form-group full-width">
                    <label for="book-description">描述</label>
                    <textarea id="book-description" class="form-control" rows="4" placeholder="请描述书籍的详细信息，如使用情况、购买渠道等"></textarea>
                </div>
                <button type="submit" class="btn btn-submit">发布书籍</button>
            </form>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>关于我们</h3>
                    <p>校园二手书交易平台致力于为学生提供便捷、安全的二手书交易服务，帮助学生节省开支，促进资源循环利用。</p>
                </div>
                <div class="footer-column">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">浏览书籍</a></li>
                        <li><a href="#">发布书籍</a></li>
                        <li><a href="#">帮助中心</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>联系我们</h3>
                    <ul class="footer-links">
                        <li>客服邮箱：support@booktrading.com</li>
                        <li>官方微信：campusbook</li>
                        <li>地址：某某大学校内创业中心</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2024 校园二手书交易平台 版权所有</p>
            </div>
        </div>
    </footer>
    
    <script>
        // API基础URL
        const API_BASE_URL = 'http://localhost:5000/api';
        
        // 当前登录用户
        let currentUser = null;
        
        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载书籍列表
            loadBooks();
            
            // 搜索功能
            document.querySelector('.search-form').addEventListener('submit', function(e) {
                e.preventDefault();
                searchBooks();
            });
            
            // 发布表单提交
            document.querySelector('.publish-form').addEventListener('submit', function(e) {
                e.preventDefault();
                publishBook();
            });
            
            // 登录和注册按钮
            document.querySelector('.btn-secondary').addEventListener('click', showLoginModal);
            document.querySelector('.btn-primary').addEventListener('click', function(e) {
                if (e.target.textContent === '注册') {
                    showRegisterModal();
                }
            });
            
            // 检查登录状态
            checkLoginStatus();
        });
        
        // 加载书籍列表
        function loadBooks() {
            fetch(`${API_BASE_URL}/books`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderBooks(data.data);
                    } else {
                        console.error('加载书籍失败:', data.error);
                        alert('加载书籍失败，请稍后重试');
                    }
                })
                .catch(error => {
                    console.error('请求错误:', error);
                    // 如果API不可用，显示模拟数据
                    renderMockBooks();
                });
        }
        
        // 搜索书籍
        function searchBooks() {
            const searchTerm = document.querySelector('.search-input').value;
            const category = document.querySelector('.category-select').value;
            
            fetch(`${API_BASE_URL}/books/search?keyword=${encodeURIComponent(searchTerm)}&category=${category}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderBooks(data.data);
                    } else {
                        console.error('搜索失败:', data.error);
                        alert('搜索失败，请稍后重试');
                    }
                })
                .catch(error => {
                    console.error('搜索请求错误:', error);
                    alert('搜索功能暂时不可用');
                });
        }
        
        // 渲染书籍列表
        function renderBooks(books) {
            const booksGrid = document.querySelector('.books-grid');
            booksGrid.innerHTML = '';
            
            if (books.length === 0) {
                booksGrid.innerHTML = '<p class="no-results">没有找到相关书籍</p>';
                return;
            }
            
            books.forEach(book => {
                const bookCard = document.createElement('div');
                bookCard.className = 'book-card';
                bookCard.innerHTML = `
                    <div class="book-image">
                        <img src="${book.images && book.images.length > 0 ? book.images[0] : 'https://via.placeholder.com/400x600?text=暂无图片'}" alt="${book.title}">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">${book.title}</h3>
                        <p class="book-author">${book.author}</p>
                        <div class="book-meta">
                            <span class="book-price">¥${book.price}</span>
                            <span class="book-condition">${book.condition}</span>
                        </div>
                        <div class="book-actions">
                            <button class="btn btn-primary btn-view" data-id="${book.id}">查看详情</button>
                            <button class="btn btn-secondary btn-contact" data-id="${book.id}">联系卖家</button>
                        </div>
                    </div>
                `;
                
                booksGrid.appendChild(bookCard);
            });
            
            // 添加事件监听
            addBookCardEventListeners();
        }
        
        // 渲染模拟书籍数据（API不可用时）
        function renderMockBooks() {
            const mockBooks = [
                {
                    id: 1,
                    title: 'Python编程：从入门到实践',
                    author: '埃里克·马瑟斯',
                    price: 35,
                    condition: '九成新',
                    images: ['https://via.placeholder.com/400x600?text=Python编程']
                },
                {
                    id: 2,
                    title: '算法导论',
                    author: 'Thomas H. Cormen',
                    price: 50,
                    condition: '八成新',
                    images: ['https://via.placeholder.com/400x600?text=算法导论']
                },
                {
                    id: 3,
                    title: '高等数学（上下册）',
                    author: '同济大学数学系',
                    price: 45,
                    condition: '九成新',
                    images: ['https://via.placeholder.com/400x600?text=高等数学']
                },
                {
                    id: 4,
                    title: '数据结构与算法分析',
                    author: 'Mark Allen Weiss',
                    price: 40,
                    condition: '八成新',
                    images: ['https://via.placeholder.com/400x600?text=数据结构']
                }
            ];
            renderBooks(mockBooks);
        }
        
        // 添加书籍卡片事件监听
        function addBookCardEventListeners() {
            document.querySelectorAll('.btn-view').forEach(button => {
                button.addEventListener('click', function() {
                    const bookId = this.getAttribute('data-id');
                    viewBookDetail(bookId);
                });
            });
            
            document.querySelectorAll('.btn-contact').forEach(button => {
                button.addEventListener('click', function() {
                    const bookId = this.getAttribute('data-id');
                    contactSeller(bookId);
                });
            });
        }
        
        // 查看书籍详情
        function viewBookDetail(bookId) {
            fetch(`${API_BASE_URL}/books/${bookId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const book = data.data;
                        alert(`书籍详情：\n书名：${book.title}\n作者：${book.author}\n价格：¥${book.price}\n成色：${book.condition}\n描述：${book.description || '暂无描述'}`);
                    } else {
                        alert('获取书籍详情失败');
                    }
                })
                .catch(error => {
                    console.error('获取详情错误:', error);
                    alert('查看详情功能暂时不可用');
                });
        }
        
        // 联系卖家
        function contactSeller(bookId) {
            if (!currentUser) {
                alert('请先登录');
                return;
            }
            
            // 实际项目中应该获取卖家信息并打开聊天窗口
            alert(`联系卖家功能待实现，书籍ID：${bookId}`);
        }
        
        // 发布书籍
        function publishBook() {
            if (!currentUser) {
                alert('请先登录');
                return;
            }
            
            const bookTitle = document.getElementById('book-title').value;
            const bookAuthor = document.getElementById('book-author').value;
            const bookCategory = document.getElementById('book-category').value;
            const bookCondition = document.getElementById('book-condition').value;
            const bookPrice = document.getElementById('book-price').value;
            const bookDescription = document.getElementById('book-description').value;
            
            // 简单验证
            if (!bookTitle || !bookAuthor || !bookPrice || !bookCondition) {
                alert('请填写必填字段');
                return;
            }
            
            const bookData = {
                title: bookTitle,
                author: bookAuthor,
                category: bookCategory || 'other',
                condition: bookCondition,
                price: bookPrice,
                description: bookDescription,
                seller_id: currentUser.id,
                images: [] // 暂时不支持图片上传
            };
            
            fetch(`${API_BASE_URL}/books`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(bookData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('书籍发布成功！');
                    // 重置表单
                    document.querySelector('.publish-form').reset();
                    // 重新加载书籍列表
                    loadBooks();
                } else {
                    alert('发布失败：' + data.error);
                }
            })
            .catch(error => {
                console.error('发布请求错误:', error);
                // 模拟发布成功
                alert('书籍发布成功！（模拟数据）');
                document.querySelector('.publish-form').reset();
            });
        }
        
        // 显示登录模态框
        function showLoginModal() {
            // 实际项目中应该显示一个美观的登录模态框
            const username = prompt('请输入用户名：');
            const password = prompt('请输入密码：');
            
            if (username && password) {
                loginUser(username, password);
            }
        }
        
        // 显示注册模态框
        function showRegisterModal() {
            // 实际项目中应该显示一个美观的注册模态框
            const username = prompt('请输入用户名：');
            const password = prompt('请输入密码：');
            const email = prompt('请输入邮箱：');
            
            if (username && password && email) {
                registerUser(username, password, email);
            }
        }
        
        // 用户登录
        function loginUser(username, password) {
            fetch(`${API_BASE_URL}/users/login`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    currentUser = data.data;
                    localStorage.setItem('currentUser', JSON.stringify(currentUser));
                    localStorage.setItem('token', data.token);
                    updateUserInterface();
                    alert('登录成功！');
                } else {
                    alert('登录失败：' + data.error);
                }
            })
            .catch(error => {
                console.error('登录请求错误:', error);
                // 模拟登录成功
                currentUser = { id: 1, username: username };
                localStorage.setItem('currentUser', JSON.stringify(currentUser));
                updateUserInterface();
                alert('登录成功！（模拟数据）');
            });
        }
        
        // 用户注册
        function registerUser(username, password, email) {
            fetch(`${API_BASE_URL}/users/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password,
                    email: email
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('注册成功，请登录！');
                    showLoginModal();
                } else {
                    alert('注册失败：' + data.error);
                }
            })
            .catch(error => {
                console.error('注册请求错误:', error);
                alert('注册功能暂时不可用，请稍后重试');
            });
        }
        
        // 检查登录状态
        function checkLoginStatus() {
            const savedUser = localStorage.getItem('currentUser');
            if (savedUser) {
                currentUser = JSON.parse(savedUser);
                updateUserInterface();
            }
        }
        
        // 更新用户界面
        function updateUserInterface() {
            const userActions = document.querySelector('.user-actions');
            
            if (currentUser) {
                // 已登录状态
                userActions.innerHTML = `
                    <span style="color: white; margin-right: 20px;">欢迎，${currentUser.username}</span>
                    <button class="btn btn-secondary" onclick="logout()">退出登录</button>
                `;
            } else {
                // 未登录状态
                userActions.innerHTML = `
                    <button class="btn btn-secondary">登录</button>
                    <button class="btn btn-primary">注册</button>
                `;
                
                // 重新添加事件监听
                document.querySelector('.btn-secondary').addEventListener('click', showLoginModal);
                document.querySelector('.btn-primary').addEventListener('click', showRegisterModal);
            }
        }
        
        // 退出登录
        function logout() {
            currentUser = null;
            localStorage.removeItem('currentUser');
            localStorage.removeItem('token');
            updateUserInterface();
            alert('已退出登录');
        }
        
        // 添加全局样式
        const style = document.createElement('style');
        style.textContent = `
            .no-results {
                grid-column: 1 / -1;
                text-align: center;
                padding: 40px;
                color: #666;
                font-size: 18px;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>